<form name="wfsFilterForm">
              <input type="hidden" name="_csrf" value="{{csrf}}"/>

  <!--WFS not available alert-->
  <div data-ng-show="isWfsAvailable == false" class="alert alert-warning">
    <button type="button" class="close"><i class="fa fa-times"/></button>
    <span data-translate=""
          data-translate-values="{'url': '{{wfsUrl}}'}">wfsNotAvailable</span>
  </div>

  <!--WFS not indexed alert-->
  <div data-ng-show="status"
       class="alert alert-warning" title="{{statusTitle}}">
    <button type="button" class="close"
            data-ng-click="status = null"><i class="fa fa-times"/></button>
    <span>{{status | translate}}</span>
  </div>

  <div>

    <!--Facet count-->
    <div data-ng-if="isFeaturesIndexed" class="count text-center"
         data-ng-if="showCount">
      {{count | number}}&nbsp;/&nbsp;{{countTotal | number}}&nbsp;<span translate="">features</span>
    </div>

    <!--Facet fields-->
    <div data-ng-if="isFeaturesIndexed"
         class="gn-facet"
         data-ng-repeat="field in fields track by field.name">
      <h5 gn-collapsible="field.expanded">
        <span class="fa fa-arrow-circle-right"
              data-ng-class="{'fa-rotate-90': field.expanded, 'gn-field-empty': !isFilterActive(field.name, field)}"></span>
        {{field.label}}
      </h5>

      <!-- value filter field -->
      <div class="filter-input wfs-layertree-filter"
        ng-if="!field.dates && (field.more || facetFilters[field.name] || (field.tree.nodes.length > 20))" ng-show="field.expanded">
        <span class="fa fa-times-circle clear" title="clear"
          ng-click="facetFilters[field.name] = ''; filterFacets()"
          ng-show="facetFilters[field.name]"></span>
        <input type="text" class="form-control input-sm layerfilter"
          placeholder="{{ 'filter' | translate }}"
          ng-model="facetFilters[field.name]"
          ng-model-options="{debounce: 300}"
          ng-change="filterFacets()">
      </div>

      <div data-ng-class="{'collapse': !field.expanded, 'is-date': !!field.dates}">
        <div class="list-group">
          <div class="list-group-item"
               data-ng-repeat="facet in field.values"
               data-ng-click="onCheckboxClick(field, facet)"
               data-ng-class="{'selected': isFacetSelected(field.name, facet.value)}">
            <i class="fa"
               data-ng-class="output[field.name].values[facet.value] ? 'fa-check-square' : 'fa-square-o'"></i>{{::facet.value}}&nbsp;({{::facet.count | number:0}})
          </div>
          <div data-ng-if="field.tree"
               gn-wfs-filter-facets-tree="field"
               gn-wfs-filter-facets-tree-isselected="isFacetSelected(name, value)">
          </div>

          <div ng-if="field.dates"
              gn-facet-daterange="output[field.name].values"
              available-dates="field.dates"
              show-graph="{{field.display == 'graph'}}"
              graph-expanded="field.expanded"
              dates-count="field.datesCount"
              callback="onUpdateDateRange(field, from, to)">
          </div>
        </div>
        <a href class="see-more" data-ng-click="getMore(field)" data-ng-if="field.more && !field.dates && !field.tree">
          <span translate>more</span>...
        </a>
      </div>
    </div>
    <!--Geometry Field-->
    <div class="gn-facet"
         ng-if="isFeaturesIndexed && indexObject.geomField">
      <h5 gn-collapsible="indexObject.geomField.expanded">
        <span class="fa fa-arrow-circle-right"
              data-ng-class="{'fa-rotate-90': indexObject.geomField.expanded, 'gn-field-empty': !isFilterActive('geometry')}"></span>
        {{'gnbbox' | translate}}
      </h5>
      <div class="list-group"
           data-ng-class="{'collapse': !indexObject.geomField.expanded}">
        <gn-bbox-input data-value="ctrl.searchGeometry"
                       data-map="map"
                       data-watch-value-change="true"
        />
      </div>
    </div>

    <!--admin buttons-->
    <div class="btn-group dropup wfs-filter-group">
      <button class="btn btn-default btn-xs" ng-class="{ disabled: !filtersChanged }"
        data-gn-click-and-spin="filterWMS()"
        data-gn-click-and-spin-stay-disabled="true">
        <i class="fa fa-filter"></i>&nbsp;
        <span data-translate="">applyFilter</span>
      </button>
      <button data-ng-if="user.canEditRecord(md) || md.isHarvested == 'y'"
              type="button" class="btn btn-default btn-xs dropdown-toggle"
              data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <i class="fa fa-cog"></i>
        <span class="caret"></span>
      </button>
      <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"
          data-ng-if="user.canEditRecord(md) || md.isHarvested == 'y'">
        <li>
          <a href="" data-ng-click="indexWFSFeatures('1.1.0')">
            <i class="fa fa-pie-chart"></i>&nbsp;
            <span data-translate="">reindexWFSFeatures</span>
          </a>
        </li>
        <li>
          <a href="" data-ng-click="initIndexRequest()">
            <i class="fa fa-refresh"></i>&nbsp;
            <span data-translate="">refresh</span>
          </a>
        </li>
        <li>
          <a href="" data-ng-click="dropFeatures()">
            <i class="fa fa-times"></i>&nbsp;
            <span data-translate="">removeFeatures</span>
          </a>
        </li>
      </ul>
      <button class="btn btn-default btn-xs"
              data-ng-if="isFeaturesIndexed"
              ng-click="showTable()">
        <i class="fa fa-table"></i>&nbsp;
        <span data-translate="">Table</span>
      </button>
    </div>

    <div ng-if="hmActive">
      <label ng-show="map" ng-show="source.getFeatures().length > 0">
        <input type="checkbox"
               ng-model="isHeatMapVisible"/>
        <span translate>displayHeatMap</span>
      </label>
      <gn-heatmap ng-if="map" map="map"
        feature-type="url + '#' + featureTypeName"
        filter="{ params: output, geometry: filterGeometry, any: searchInput}"
        enabled="isHeatMapVisible"/>
    </div>


    <hr>
    <button data-gn-click-and-spin="resetFacets()" class="btn btn-primary gn-reset-facets">
      <span translate>reset</span>
    </button>

  </div>

</form>
